<template>
    <view
        class="fixed-bottom"
        :style="{
            width: isExpand ? 'calc(100% - 584px)' : 'calc(100% - 416px)',
        }"
    >
        <view class="more">
            <view
                @click="isShowBottom"
                class="more-change"
                v-if="btnArr.length > 3"
                >{{ bottomShow ? "更多..." : "收起>>" }}</view
            >
            <view
                v-for="(item, index) in btnArr"
                :key="index"
                class="item"
                @click="selectOperation(item, item.act)"
                v-if="maskIndex < index"
            >
                <text
                    v-if="false"
                    class="item-icon icon-font"
                    :class="item.fontIcon"
                >
                </text>
                <text></text>
                {{ item.title }}
            </view>
        </view>
    </view>
</template>

<script>
import operationPay from "./operationPay.vue";
import util from "../../js/util/Util.js";
import { mapGetters } from "vuex";

export default {
    components: { operationPay },
    props: {
        btnArr: {
            type: Array,
            default: [],
        },
    },
    computed: {
        ...mapGetters(["isExpand"]),
    },
    data() {
        return {
            bottomShow: true,
            btnIndex: 3,
            maskIndex: -1,
        };
    },
    watch: {
        btnArr() {
            this.bottomShow = true;
            this.btnIndex = 3;
            if (this.btnArr.length > 3)
                this.maskIndex = this.btnArr.length - this.btnIndex - 1;
            else this.maskIndex = -1;
        },
    },
    methods: {
        /**** 选择操作 ***/
        selectOperation(item, act) {
            console.log("act==:", item, act);
            this.$emit("orderOpration", act);
        },

        /*** 底部展开与收起 ***/
        isShowBottom() {
            this.bottomShow = !this.bottomShow;
            if (this.bottomShow) {
                this.btnIndex = 3;
                this.maskIndex = this.btnArr.length - this.btnIndex - 1;
            } else {
                this.btnIndex = this.btnArr.length;
                this.maskIndex = -1;
            }
        },
    },
};
</script>

<style lang="scss">
.fixed-bottom {
    width: calc(100% - 416px);
    position: fixed;
    height: 60px;
    right: -1px;
    bottom: -1px;
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    z-index: 99;
    .more {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .print {
            width: 150px;
            text-align: center;
            line-height: 60px;
            border-left: 1px solid #ececec;
            font-size: 16px;
            background: #3388ff;
            color: #fff;
            cursor: pointer;
        }
        .print:hover {
            background: #5990ff;
            color: #fff;
        }
        .item,
        .more-change {
            min-width: 60px;
            text-align: center;
            line-height: 60px;
            border-left: 1px solid #ececec;
            font-size: 16px;
            cursor: pointer;
            padding-left: 5px;
            padding-right: 5px;
            color: #333;
            .item-icon {
                font-size: 20px;
            }
        }
        .more-change:hover {
            background: rgba(200, 200, 200, 0.4);
        }
        .item:hover {
            background: rgba(200, 200, 200, 0.4);
        }
        .item:last-child {
            width: 120px;
            background: #3388ff;
            color: #fff;
        }
        .item:last-child:hover {
            width: 120px;
            background: #4ca9ff;
        }
    }
}
</style>
